<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点菜 </title>
    <link th:href="@{/layer/css/layui.css}" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}" ></script>
    <script th:src="@{/layer/layui.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <style>
        .layui-table-cell {
            height: 100%;
            line-height: 28px;
            padding: 0 15px;
            position: relative;
            box-sizing: border-box;
        }
        .fr{
            float: right;
        }
    </style>
</head>
<body>
<div th:replace="~{commons/commons::topdao}"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="vertical-tab row" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist" id="navtable">
                    <li role="presentation" class="active"><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="false" id="1">特色热菜</a></li>
                    <li role="presentation" class=""><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="false" id="2">特色冷菜</a></li>
                    <li role="presentation" class=""><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="true" id="3">原味炖汤</a></li>
                    <li role="presentation" class=""><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="false" id="4">酒水饮料</a></li>
                    <li role="presentation" class=""><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="false" id="5">地方名吃</a></li>
                    <li role="presentation" class=""><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="false" id="6">美味火锅</a></li>
                    <li role="presentation" class=""><a href="#Section1"  role="tab" data-toggle="tab" aria-expanded="false" id="7">特色烤鱼</a></li>

                </ul>
                <!-- Tab panes -->
                <div class="tab-content tabs" style="min-width: 85%;">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <form class="form-inline my-2 my-lg-0">
                            <button class="btn btn-outline-success my-2 my-sm-0 fr " type="button" onclick="OnetableMenu()">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                            <input class="form-control fr" type="text" name="menuname" id="menuname" style="margin: 0 10px;">

                            <input class="form-control " type="button" >
                        </form>
                        <table id="tabOne" layui-filter="test" lay-skin="line" lay-size="lg"></table>
                        <form class="form-inline my-2 my-lg-0">
                            <button class="layui-btn layui-btn-lg layui-btn-warm my-2 my-sm-0 " style="width: 100%;" type="button" onclick="DoBill()">
                                <i class="layui-icon layui-icon-loading"></i>
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--模态框  已开台表格-->
</div>
<script>
    var layer;
    var tableOne;
    $(function () {

        layui.use(['layer','table'],function () {
            //赋值
            layer = layui.layer,
                layuiTable = layui.table;
            /*已预约表格*/
            tableOne = layuiTable.render({
                elem: "#tabOne",
                cols: [
                    [ //表头
                        { type: 'numbers', title: '序号' , width: 75 },//序号列，title设定标题名称
                        { field: 'menuid', title: 'ID', hide: true },
                        {
                            field: 'imgpath', title: '图片', align: "center", width: 150, templet:
                                function (data) {
                                    return "<img width='50px' height='50px' alt='' src='" + data.imgpath + "'>";
                                }
                                ,style: 'height:65px'
                        },
                        { field: 'menuname', title: '美食名称', width: 182 },
                        { field: 'menuprice', title: '美食价格' , width: 113},
                        { field: 'menuP', title: '单位', width: 98 },
                        {type: "checkbox", width: 70},
                        //{field: 'conut', title: '数量', width: 98 ,edit: 'text'}
                    ]
                ],
                id: "ListTable",
                page: true,
                data: [],
                height: "full-190",
                limit: 6,
                limits: [ 6, 10, 15,20],
                done: function (res, curr) {
                    var currPage = curr; // 获得当前页码
                    var dataLength = res.data.length; // 获得当前页的记录数
                    var count = res.count; // 获得总记录数
                    if (dataLength == 0 && count != 0) { //如果当前页的记录数为0并且总记录数不为0
                        layuiTable.reload("ListTable", { // 刷新表格到上一页
                            page: {
                                curr: currPage - 1
                            }
                        });
                    }
                }
            });
            OnetableMenu();
        });

    });
    /*点击菜单类型列表查询*/
    $("#navtable li a").click(function () {
      var aa = $(this).attr("id");
      console.log(aa);
        tableOne.reload({
            url: "/menutable/loadmenu",
            where: {
                menuTypeid: aa
            },
            page: {
                curr: 1
            }
        });
    });

    /*查询*/
    function OnetableMenu() {
        tableOne.reload({
            url: "/menutable/loadmenu",
            where: {
                menuname: $("#menuname").val()
            },
            page: {
                curr: 1
            }

        });
    }
    /*批量下单*/
    function DoBill() {
        var checks = layuiTable.checkStatus('ListTable');
        if(checks.data.length > 0){
            var ArrayId = new Array();
            // var Arraycount = new Array();
            for ( var i = 0; i < checks.data.length;i++){
                ArrayId[i] = checks.data[i].menuid;
                // Arraycount[i] = checks.data[i].conut;
            }
            // console.log(Arraycount);//counts
            var index = layer.open({
                title: "下单",
                type: 2,
                area: ['800px', '600px'],
                content: "/menutable/ToaddBill?ids=" + ArrayId,
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回菜单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500);
                }
            });
            $(window).on("resize", function () {
                layui.layer.full(index);
            });
        }
        else {
            layer.alert("请选择菜单", { icon: 0 });
        }

    }
</script>
</body>
</html>